<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="common/includeAdmin::header('用户保存','')"></head>
<style type="text/css">
.userImgDiv{ width:100px; height:80px; overflow:hidden; border:1px solid #e6e6e6; border-radius:2px; cursor:pointer; margin-left:75px; position:relative; line-height:60px;}
#userImg{ max-width:90%; max-height:90%;}
.userImgDiv:after{ position:absolute; width:100%; height:100%;line-height:60px; z-index:-1; text-align:center; font-size:12px; content:"上传头像"; left:0; top:0; color:#9F9F9F;}
.userAdd .layui-form-label{ width:60px; padding-left:0;}
.userAdd .layui-input-block{ margin-left:75px;}
.userAdd .layui-input-block input{ padding:0 5px;}
</style>
<body class="childrenBody">
<form class="layui-form userAdd">
	<!-- <div class="layui-form-item">
		<label class="layui-form-label">头像</label>
		<div class="layui-upload-list userImgDiv">
			<img class="layui-upload-img userImg">
		</div>
	</div> -->
	<div class="layui-form-item">
		<label class="layui-form-label">用户名</label>
		<div class="layui-input-block">
			<input type="text" class="layui-input userName" lay-verify="required" placeholder=用户名 />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">昵称</label>
		<div class="layui-input-block">
			 <input type="text" class="layui-input nickName" lay-verify="required" placeholder=昵称 />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">用户密码</label>
		<div class="layui-input-block">
			<input type="text" class="layui-input userPwd" lay-verify="required" placeholder="密码" />
		</div>
		
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">用户描述</label>
		<div class="layui-input-block">
			 <textarea name="userDesc" placeholder="请输入描述" class="layui-textarea userDesc"></textarea>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">图像上传</label>
		<div class="layui-upload">
		  <button type="button" class="layui-btn" id="uploadImgBtn">上传图片</button>
		  <div class="layui-upload-list userImgDiv">
		    <img class="layui-upload-img" id="userImg">
		    <input type="hidden" class="userImg" value="" />
		    <p id="demoText"></p>
		  </div>
		</div>  
	</div>
	<!-- <div class="layui-form-item">
		<button class="layui-btn layui-block" lay-filter="addData" lay-submit>提交</button>
	</div> -->
</form>
<div th:include="common/includeAdmin::footer"></div>
<script type="text/javascript">
layui.use([ 'form', 'layer','upload' ], function() {
	var form = layui.form;
	var $ = layui.jquery;
	var layer = parent.layer === undefined ? layui.layer : top.layer;
	var upload = layui.upload;
	
	
	
	
	  //普通图片上传
	  var uploadInst = upload.render({
	    elem: '#uploadImgBtn'
	    ,url: '/api/file/upload'
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#userImg').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //如果上传失败
	      if(res.code > 0){
	        return layer.msg('上传失败');
	      }
	      //上传成功
	      $(".userImg").val(res.data);
	      //layer.msg(res.data);
	      
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
	
})

</script>

</script>
</body>
</html>